<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
	*
	{
		margin: 0%;
		padding:0%;
		box-sizing: border-box;
	}
	html
	{
		height: 100%;
		background: linear-gradient(to bottom, #C9FFBF , #FFAFBD);
	}
	form
	{
	 	width: 400px;
	 	height: 300px;
		background: rgba(255, 255, 255, 0.3);
		margin: 0 auto;
		margin-top: 10%;
		border-radius: 2%;
		border: 1px solid #ffffff;
		box-shadow: 0px 0px 10px #ffffff;
		text-align: center;
		padding: 20px 0px;
	}
	p{
		font-size: 26px;
		font-weight: bold;
		letter-spacing: 5px;
	}
	input
	{
		margin-top: 25px;
		width: 230px;
		height: 30px;
		border-radius: 7px;
		outline: none;
		border: 1px solid rgb(211, 211, 211);
	}
	
	.in1,.in2
	{
		padding-left: 3px;
	}
	.in1:focus,.in2:focus
	{
		box-shadow: 0px 0px 100px #ffffff;
	}
	.submit
	{
		margin-top: 30px;
		width: 150px;
		height: 45px;
		background-color: #ffffff;
		border: 1px solid rgb(0, 225, 255);
		border-radius: 70px;
		color: rgb(0, 161, 182);
		outline: none;
	}
	.submit:hover
	{
		background: rgb(0, 161, 182);
		color: #ffffff;
	}
	img
	{
		width: 50%;
	}
</style>


</head>
<body>
	
	<div id="result">
		<form action="/Testfirst/Imgtest" method="post" enctype="multipart/form-data">
			<p> LOGIN </p>
				<img id="imgx"src="" alt="">
				<input type="file" name="imgfile" onchange="img_read(this)">
				
				<br>
				<input class="submit" type="submit" value="登录">
				
		</form>
		
	</div>
	
</body>
<script type="text/javascript">

function img_read(inx) {
	var re = new FileReader();

	var file = inx.files[0];

	// console.log(file.size);
	re.readAsDataURL(file);

	re.onload = function(re)
	{
		console.log(re.target.result);
		$('#imgx').attr("src",re.target.result);
	}

}

$(document).ready(function()
{
	var httpRequest;
	var ck;
	var inc = document.querySelector("div[id='imgx']");
	console.log(""+inc);
	
});
	

</script>

</html>